<template>
	<view class="search">
		<view class="search-plate-1">
			<view class="sousuo">
				<image src="@/static/ic_search.png" mode="widthFix"></image>
				<input type="text" v-model="goods_name" placeholder="看分类,搜商品" placeholder-class="plStyle" @confirm="onSearch" @focus="onDel" />
			</view>
			<view class="history">
				<view class="history-top">
					<text>搜索历史</text>
					<u-icon name="trash" color="#999" size="30" @click="onDelHistory"></u-icon>
				</view>
				<view class="history-btm">
					<view class="item" v-for="(item,index) in historyList" :key="index" @click="onHistorySearch(item.search_name)">
						{{item.search_name}}
					</view>
				</view>
			</view>
		</view>
		<view class="search-plate-2">
			<view class="content">
				<view class="item" v-for="(item,index) in goods_list" :key="index" @click.stop="goGoodsDetail(item.goods_id)">
					<image :src="item.goods_pic_one" mode=""></image>
					<view class="item-right">
						<view class="name">
							{{item.goods_name}}
						</view>
						<view class="desc">
							{{item.goods_sub_describition}}
						</view>
						<view class="tags">
							<u-tag :text="i" type="warning" size="mini" v-for="(i,num) in item.label_names" :key="num"></u-tag>
						</view>
						<view class="old-price">
							¥{{item.goods_prices}}
						</view>
						<view class="goods-btm">
							<text>{{item.sub_prices}}</text>
							<view class="goods-btm-right">
								<image src="../../../static/ic_buycar_round.png" mode="widthFix"  @click.stop="onAddCart(item.goods_id)"></image>
								<button class="bg-btn"  @click.stop="goSubmitOrder(item.goods_id)">马上抢</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				goods_name:'',
				goods_list:[],
				historyList:[]
			};
		},
		onReachBottom() {
			this.page ++
			this.onSearch()
		},
		created() {
			this.getHistory()
		},
		methods:{
			// 前往产品详情
			goGoodsDetail(id){
				uni.navigateTo({
					url:'../shop/goodsDetail/goodsDetail?id=' + id
				})
			},
			// 加入购物车
			onAddCart(id){
				uni.request({
				    url:this.$Url +'/index.php/app/Cart/addCart',
				    method:'POST',
				    data:{
				       live_program_id:'',
					   goods_id:id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 前往确认订单
			goSubmitOrder(id){
				uni.removeStorageSync('old_data')
				uni.navigateTo({
					url:'../shop/goodsDetail/submitOrder/submitOrder?id=' + id + '&type=1'
				})
			},
			// 历史搜索
			onHistorySearch(name){
				this.goods_name = name
				this.onSearch()
			},
			// 删除搜索历史
			onDelHistory(){
				uni.request({
				    url:this.$Url +'/index.php/App/Banner/clearSearchHistory',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.historyList = []
							uni.showToast({
								title:'已清空',
								icon:'none',
								duration:1200
							})
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 请求搜索历史
			getHistory(){
				uni.request({
				    url:this.$Url +'/index.php/App/Banner/getSearchHistory',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.historyList = res.data.data
						} else{
							uni.showToast({
								title:res.data.data,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 清空数组
			onDel(){
				this.goods_list = []
			},
			// 搜索商品
			onSearch(){
				uni.request({
				    url:this.$Url +'/index.php/App/Banner/searchGoods',
				    method:'POST',
				    data:{
				       goods_name:this.goods_name,
					   p:this.page
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.goods_list = []
							this.goods_list = this.goods_list.concat(res.data.data.goods_list)
							this.getHistory()
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.search{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	.search-plate-1{
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 20upx;
		.sousuo{
			width: 680upx;
			height: 70upx;
			border: 1px solid #666;
			border-radius: 35upx;
			display: flex;
			align-items: center;
			image{
				width: 30upx;
				height: 30upx;
				margin-left: 25upx;
				margin-right: 25upx;
			}
			input{
				font-size: 28upx;
				color: #999;
			}
			.plStyle{
				color: #f0f0f0;
			}
		}
		.history{
			width: 100%;
			margin-top: 20upx;
			padding: 0 30upx;
			.history-top{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20upx;
				text{
					color: #666;
					font-size: 26upx;
				}
			}
			.history-btm{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.item{
					color: #999;
					font-size: 26upx;
					background-color: #e8e8e8;
					padding: 18upx 20upx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 30upx;
					margin-right: 30upx;
				}
			}
		}
	}
	.search-plate-2{
		
		.content{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.item{
				width: 710upx;
				height: 333upx;
				background-color: #fff;
				border-radius: 10upx;
				display: flex;
				align-items: center;
				margin-top: 20upx;
				image{
					width: 260upx;
					height: 260upx;
					margin-right: 24upx;
					margin-left: 24upx;
				}
				.item-right{
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					width: 380upx;
					.name{
						font-size: 30upx;
						color: #000;
						font-weight: 600;
						margin-bottom: 10upx;
						overflow: hidden;
						-webkit-line-clamp: 1;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
					.desc{
						font-size: 23upx;
						color: #7f7f7f;
						margin-bottom: 15upx;
						overflow: hidden;
						-webkit-line-clamp: 1;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
					.tags{
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						justify-content: space-between;
						margin-bottom: 20upx;
					}
					.old-price{
						font-size: 18upx;
						color: #999;
						text-decoration: line-through;
						margin-bottom: 5upx;
					}
					.goods-btm{
						display: flex;
						align-items: center;
						justify-content: space-between;
						 text{
							 font-size: 24upx;
							 font-weight: 600;
							 color: #c11800;
						 }
						 .goods-btm-right{
							 display: flex;
							 align-items: center;
							 image{
								 width: 53upx;
								 margin-right: 14upx;
							 }
							 button{
								 width: 126upx;
								 height: 52upx;
								 font-size: 24upx;
								 font-weight: 500;
								 display: flex;
								 align-items: center;
								 justify-content: center;
							 }
						 }
					}
				}
			}
		}
		
	}
}
</style>
